<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" id="t">
        <tr>
            <th id="title_left">书名</th>
            <th id="title_right">价格</th>
        </tr>
        <tr id="first">
            <td>网页工程实训</td>
            <td>30.00</td>
        </tr>
        <tr id="scend">
            <td>c语言工程实训</td>
            <td>32.00</td>
        </tr>
    </table>
    <div style="display: flex;">
        <input type="button" value="增加一行" id="add">
        <input type="button" value="删除第二行" id="del">
        <input type="button" value="修改标题" id="change">
    </div>
</body>
<script>
    var title_leftDom = document.getElementById("title_left");
    var title_rightDom = document.getElementById("title_right");
    var scendDom = document.getElementById("scend");
    var firstDom = document.getElementById("first");
    var addDom = document.getElementById("add");
    var delDom = document.getElementById("del");
    var changeDom = document.getElementById("change");
    var tableDom = document.getElementById("t")
    addDom.onclick = function () {
        var createTr = document.createElement("tr");
        var createTd1 = document.createElement("td");
        var createTd2 = document.createElement("td");
        createTr.appendChild(createTd1);
        createTr.appendChild(createTd2);
        tableDom.appendChild(createTr)
    }
    delDom.onclick = function () {
        scendDom.style.display = "none";
    }
    changeDom.onclick = function () {
        var left = prompt("左标题修改成:");
        var right = prompt("右标题修改成:");
        title_leftDom.innerText = left;
        title_rightDom.innerText = right
    }
</script>

</html>